<?php
/**
 * Default home page view
 *  
 * @author
 * @version
 */
/**
 * Set headers, dojo, etc... 
 */

$this->headScript ()->appendFile (  $this->url() . 'scripts/timeline/api/timeline-api.js' );
$this->headScript ()->appendFile ( $this->url() . 'scripts/internal/initializer.js' );
$this->headScript ()->appendFile ( $this->url() . 'scripts/internal/examples.js' );

$this->headStyle ()->appendStyle ('.grid { height: 30em; }' );

$this->placeholder ( 'title' )->set ( '' );

$this->dojo ()->enable ();
$this->dojo ()->requireModule ( "dojox.grid.Grid" );
$this->dojo ()->requireModule ( "dojo.parser" );
$this->dojo ()->requireModule ( "dojo.data.ItemFileWriteStore" );
$this->dojo ()->requireModule ( "dojo.date.locale" );
$this->dojo ()->requireModule ( "zend.grid.data.databaseModel" );

$this->dojo ()->setDjConfig ( array ('parseOnLoad' => true , /*'debugAtAllCosts' => true, 'isDebug' => true*/) );
$this->dojo ()->addStylesheetModule ( 'dijit.themes.tundra' );
$this->dojo ()->setLocalPath ( $this->url() . 'scripts/dojo/dojo/dojo.js' );
$this->dojo ()->addStylesheet ( $this->url() . 'scripts/dojo/dojox/grid/_grid/tundraGrid.css' );

/**
 * Builds the current date for timeline focusing
 */
require_once 'Zend/Date.php';
$now = Zend_Date::now ();
?>

<script type="text/javascript" src="<?php echo $this->url() ?>scripts/dojo/dojox/grid/_grid/lib.js"></script>
<script type="text/javascript" src="<?php echo $this->url() ?>scripts/dojo/dojox/grid/_grid/drag.js"></script>
<script type="text/javascript" src="<?php echo $this->url() ?>scripts/dojo/dojox/grid/_grid/scroller.js"></script>
<script type="text/javascript" src="<?php echo $this->url() ?>scripts/dojo/dojox/grid/_grid/builder.js"></script>
<script type="text/javascript" src="<?php echo $this->url() ?>scripts/dojo/dojox/grid/_grid/cell.js"></script>
<script type="text/javascript" src="<?php echo $this->url() ?>scripts/dojo/dojox/grid/_grid/layout.js"></script>
<script type="text/javascript" src="<?php echo $this->url() ?>scripts/dojo/dojox/grid/_grid/rows.js"></script>
<script type="text/javascript" src="<?php echo $this->url() ?>scripts/dojo/dojox/grid/_grid/focus.js"></script>
<script type="text/javascript" src="<?php echo $this->url() ?>scripts/dojo/dojox/grid/_grid/selection.js"></script>
<script type="text/javascript" src="<?php echo $this->url() ?>scripts/dojo/dojox/grid/_grid/edit.js"></script>
<script type="text/javascript" src="<?php echo $this->url() ?>scripts/dojo/dojox/grid/_grid/view.js"></script>
<script type="text/javascript" src="<?php echo $this->url() ?>scripts/dojo/dojox/grid/_grid/views.js"></script>
<script type="text/javascript" src="<?php echo $this->url() ?>scripts/dojo/dojox/grid/_grid/rowbar.js"></script>
<script type="text/javascript" src="<?php echo $this->url() ?>scripts/dojo/dojox/grid/_grid/publicEvents.js"></script>
<script type="text/javascript" src="<?php echo $this->url() ?>scripts/dojo/dojox/grid/VirtualGrid.js"></script>
<script type="text/javascript" src="<?php echo $this->url() ?>scripts/dojo/dojox/grid/_data/fields.js"></script>
<script type="text/javascript" src="<?php echo $this->url() ?>scripts/dojo/dojox/grid/_data/model.js"></script>
<script type="text/javascript" src="<?php echo $this->url() ?>scripts/dojo/dojox/grid/_data/editors.js"></script>
<script type="text/javascript" src="<?php echo $this->url() ?>scripts/dojo/dojox/grid/_data/dijitEditors.js"></script>
<script type="text/javascript" src="<?php echo $this->url() ?>scripts/dojo/dojox/grid/Grid.js"></script>
<script type="text/javascript" src="<?php echo $this->url() ?>scripts/dojo/zend/grid/data/databaseModel.js"></script>

<script type="text/javascript">

	// timeline component initializations:
	var t1 = null;
	var eventSource = null;
	setTimeline("<?php echo $now?>", "<?php echo $this->url(array('action' => 'data')) ?>", "<?php echo $this->url(array('action' => 'milestones')) ?>");	
	
	// custom simple MySql date editor
	dojo.declare("mySqlDateEditor", dojox.grid.editors.DateTextBox, {
		format: function(inDatum, inRowIndex){
			inDatum = mysqlDateToJsDate(inDatum);
			return this.inherited(arguments, [inDatum, inRowIndex]);
		},
		getValue: function(inRowIndex){
			var v = this.editor.getValue(), fv = jsDateToMySqlDate(v);
			return fv;
		}
	});

	// custom simple MySql date editor
	dojo.declare("statusEditor", dojox.grid.editors.ComboBox, {
		format: function(inDatum, inRowIndex){
			inDatum = getStatusName(inDatum);
			return this.inherited(arguments, [inDatum, inRowIndex]);
		},
		getValue: function(inRowIndex){
			var v = this.editor.getValue(), fv = getStatusId(v);
			return fv;
		}
	});
	
	// model for grid
    var model = new dojox.grid.data.DbTable("<?php echo $this->url()?>data");
	model.observer(this);

	// layout for grid
	var layout = [
	     		 // view 0
	     		{ type: 'dojox.GridRowView', height: "2000px"},
	     		//  view 1
	     		{ rows: [[{ name: "Row", get: function getRow(inRowIndex){ return ' ' + inRowIndex; }, width: 3}]], noscroll: true},
	     		// view 2
	     		{
	     			rows: [[
	     			{ name: "id", width: 3 },
	     			{ name: "Start", editor: mySqlDateEditor, constraint: {selector: "date"}, width: 7, formatter: formatMySqlDate},
	     			{ name: "End", editor: mySqlDateEditor, constraint: {selector: "date"}, width: 7, formatter: formatMySqlDate},
	     			{ name: "Title", width: 20, editor: dojox.grid.editors.Input },
	     			{ name: "Link", width: 'auto', editor: dojox.grid.editors.Input },
	     			{ name: "Description", width: 40, editor: dojox.grid.editors.Editor, editorToolbar: true },			
	     			{ name: "Status", width: 'auto', editor: statusEditor, options: ["completed", "planned", "tentative", "milestone", "release"], formatter: formatStatus}
	      		]]
	     		}];
	
	// more initializations
	dojo.addOnLoad(onLoad);
	window.onresize = onResize;
	
	/**
    * Refresh the timeline view
    * @return
    */
    function refresh() {
		grid.refresh();
    	eventSource.clear(); 
    	Timeline.loadJSON('<?php echo $this->url(array("action" => "data")) ?>', function(json, url) { 
    		eventSource.loadJSON(json, url); 
		}); 
    	tl.paint();
   	}
	
</script>

<body class="tundra">

<center><div class="controls" id="controls"></div></center>

<br />
<div id="timeline"
	style="height: 400px; border: 1px solid #aaa; font-size: small; font-family: Verdana, Arial, sans-serif; font-size: x-small; font-weight: bold;"></div>
<br />

<div dojoType="dijit.form.Button" label="Add" id="add" name="add" iconClass="dijitEditorIcon dijitEditorIconCopy" onclick="add('<?php echo $this->url( array( "controller" => "timeline" , "action" => "add" )) ?>')"></div>
<div dojoType="dijit.form.Button" label="Remove" id="remove" name="remove" iconClass="dijitEditorIcon dijitEditorIconDelete" onclick="remove('<?php echo $this->url( array( "controller" => "timeline" , "action" => "delete" )) ?>')"></div>
<div dojoType="dijit.form.Button" label="Refresh" id="refresh" name="refresh" iconClass="dijitEditorIcon dijitEditorIconRedo" onclick="refresh()"></div>

<div id="grid" jsId="grid" dojoType="dojox.Grid" elasticView="2" model="model" structure="layout">
	<script type="dojo/connect" event="onCellClick" >
		centerTimeline(mysqlDateToJsDate(grid.model.getRow(grid.selection.getSelected())[2]));
    </script>
</div>

</body>
